<template>
  <div class="question-editor">
    <draggable
        v-model="questions"
        item-key="id"
        handle=".drag-handle"
        @end="emitChanges"
    >
      <template #item="{ element: q, index }">
        <div class="question-item">
          <div class="question-header">
            <el-icon class="drag-handle"><Menu /></el-icon>

            <el-select
                v-model="q.type"
                class="type-select"
                @change="handleTypeChange(q)"
            >
              <el-option label="单选题" value="radio" />
              <el-option label="多选题" value="checkbox" />
              <el-option label="文本题" value="text" />
            </el-select>

            <el-input
                v-model="q.title"
                placeholder="输入问题内容"
                class="question-input"
                clearable
            />

            <el-checkbox v-model="q.required" class="required-checkbox">
              必填
            </el-checkbox>

            <el-button
                type="danger"
                icon="Delete"
                circle
                @click="removeQuestion(index)"
                class="delete-btn"
            />
          </div>

          <div v-if="q.type !== 'text'" class="options-section">
            <div
                v-for="(option, optIndex) in q.options"
                :key="optIndex"
                class="option-row"
            >
              <el-input
                  v-model="q.options[optIndex]"
                  :placeholder="`选项 ${optIndex + 1}`"
                  class="option-input"
                  clearable
              >
                <template #prefix>
                  <el-icon><CirclePlus /></el-icon>
                </template>
              </el-input>

              <el-button
                  v-if="q.options.length > 1"
                  type="danger"
                  icon="Delete"
                  circle
                  @click="removeOption(q, optIndex)"
                  class="remove-option-btn"
              />
            </div>

            <el-button
                type="primary"
                plain
                @click="addOption(q)"
                icon="Plus"
                class="add-option-btn"
            >
              添加选项
            </el-button>
          </div>
        </div>
      </template>
    </draggable>
  </div>
</template>

<script setup lang="ts">
import { defineProps, defineEmits } from 'vue'
import draggable from 'vuedraggable'
import { Menu, Delete, CirclePlus, Plus } from '@element-plus/icons-vue'

const props = defineProps({
  questions: {
    type: Array,
    required: true
  }
})

const emit = defineEmits(['update:questions', 'change'])

const handleTypeChange = (question: any) => {
  if (question.type === 'text') {
    delete question.options
  } else {
    question.options = question.options || ['选项1', '选项2']
  }
  emitChanges()
}

const removeQuestion = (index: number) => {
  emit('update:questions', props.questions.filter((_, i) => i !== index))
  emit('change')
}

const addOption = (question: any) => {
  if (!question.options) question.options = []
  question.options.push(`选项 ${question.options.length + 1}`)
  emitChanges()
}

const removeOption = (question: any, index: number) => {
  question.options.splice(index, 1)
  emitChanges()
}

const emitChanges = () => {
  emit('change')
}
</script>

<style scoped>
.question-editor {
  margin-top: 20px;
}

.question-item {
  padding: 16px;
  margin-bottom: 16px;
  background-color: #ffffff;
  border-radius: 8px;
  border: 1px solid #ebeef5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
}

.question-item:hover {
  border-color: #c0c4cc;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.question-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  gap: 12px;
}

.drag-handle {
  cursor: move;
  color: #909399;
  font-size: 18px;
}

.drag-handle:hover {
  color: #409eff;
}

.type-select {
  width: 120px;
}

.question-input {
  flex: 1;
}

.required-checkbox {
  margin-left: auto;
  white-space: nowrap;
}

.delete-btn {
  margin-left: 8px;
}

.options-section {
  margin-left: 36px;
}

.option-row {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  gap: 12px;
}

.option-input {
  flex: 1;
}

.remove-option-btn {
  flex-shrink: 0;
}

.add-option-btn {
  margin-top: 8px;
}
</style>